---
title: make real, the story so far
category: product
description: Our tldraw + GPT-4V experiment broke the internet a little.
hero: /images/blog/201afffe-fee4-4e16-92f6-9d372354f1e2_1896x1012.png
date: 11/18/2023
status: published
author: steveruizok
---

Ever wanted to just sketch an interface, press a button, and get a working website? Well, now you can at [makereal.tldraw.com](https://makereal.tldraw.com).

And here’s the story.

<Video
	lazy
	autoplay
	src="images/blog/F-5SomuWoAERTCa.mp4"
	thumbnail="/images/blog/b7a67dff-86f7-4516-8328-98ad1745efed/transcoded_00002.png"
/>

## Try it out

…but first, maybe you should try it yourself. Here’s how to do it:

1. Get an [OpenAI developer API key](https://platform.openai.com/account/limits) (you must have [access to the GPT-4 API](https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4))

2. Visit [makereal.tldraw.com](https://makereal.tldraw.com)

3. Paste your API key in the input at the bottom of the screen

4. Draw your user interface

5. Select your drawing

6. Click the blue **Make Real** button

In a few seconds, your website will appear on the canvas. You can move it around and resize it. You can even _draw on top of the website_ , click **Make Real** again to generate a new result with your annotations.

<Video
	lazy
	autoplay
	src="/images/blog/1721717738941698389_1.mp4"
	thumbnail="/images/blog/f6bee323-1044-4dcf-9c8c-dfff6ebe692d/transcoded_00004.png"
/>

## How it started

At this year’s [OpenAI dev day](https://openai.com/blog/new-models-and-developer-products-announced-at-devday), the company announced the release of its new [GPT4 with Vision](https://platform.openai.com/docs/guides/vision) model, a large language model capable of accepting images as input. It can do more than the usual hotdog-or-not image recognition: you can send it a photo of a chessboard and ask for the next best move; ask it why a New Yorker cartoon was funny; or get it to summarize a whiteboard (more on that soon).

A day after the announcement, Figma engineer [Sawyer Hood posted on X](https://twitter.com/sawyerhood/status/1721717738941698389) a video showing how he use the [tldraw component](https://tldraw.dev) to draw a user interface, export the drawing as a picture, send the picture to GPT-4V, and get back the HTML / CSS for a working website based on the drawing.

<Video
	lazy
	autoplay
	src="/images/blog/F-5SomuWoAERTCa.mp4"
	thumbnail="/images/blog/8bf096e3-2487-46ee-af8c-db3cf4bacc03/transcoded_00001.png"
/>

Coming on the heels of Vercel’s text-based user interface generator [v0](https://v0.dev/), this simple, clever, and easily hackable project was an instant hit. Writing two weeks later, the [open source repository](https://github.com/SawyerHood/draw-a-ui) is already over 10,000 GitHub stars.

Meanwhile in London, at the tldraw office, we nearly fell over ourselves at the possibilities.

## Back to the canvas

The next morning, we [forked that repository](https://github.com/tldraw/draw-a-ui) and started making changes.

The first was obvious: put the website _back on the canvas_.

One of the web’s best tricks is the ability to embed one website in another website using the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). In Sawyer’s demo, this iframe was in a popup. However, because tldraw’s canvas has always been made of [regular HTML](https://twitter.com/tldraw/status/1721565534032916576), its canvas can support iframes directly.

<Video
	lazy
	autoplay
	src="/images/blog/1721565534032916576_1.mp4"
	thumbnail="/images/blog/6a92f94e-0d6c-4aac-a6bf-8b88746cb7ba/transcoded_00009.png"
/>

Suddenly we had a new loop: sketch a website and generate a working prototype, all without leaving the canvas. You could resize the website to explore its responsive breakpoints, arrange them together with other iterations, and enjoy all the thousand other benefits of canvas-based interactions.

## Canvas conversations

On Wednesday, we took it further. Now that the website output was just another shape on the tldraw canvas, we could take it to the next step: _marking up the website_ with notes and revisions, then sending it back as a _new prompt_.

<Video
	lazy
	autoplay
	src="/images/blog/F-5SomuWoAERTCa.mp4"
	thumbnail="/images/blog/959a270f-2ca1-4396-9605-dda6755d6daf/transcoded_00005.png"
/>

It’s incredible that this even works, because one limitation of the iframe element is that it’s essentially a black box to the website that contains it—there’s no way to see what’s inside the iframe. For this reason, embedded content shows up in our image exports only as empty rectangles.

![](/images/blog/d28bb10a-715d-432c-ab23-e069027a426a_2374x954.png)

So how do we get GPT4V to “see” what’s in the box? We give it back the previous result’s HTML, together with a note to “fill in” the white box with this provided HTML.

And it works.

<Video
	lazy
	autoplay
	src="/images/blog/1725083976392437894_1.mp4"
	thumbnail="/images/blog/e0f2f333-289d-40d8-acb0-d04c48a21393/transcoded_00006.png"
/>

The result is an iterative back-and-forth shaping of a design via markup, notes, screenshots of other websites, and whatever else you can fit onto a canvas—which in tldraw, means _anything_. Like a chat window, the canvas is transformed into a _conversation space_ where you and the AI can workshop an idea together. In this case, the result is working websites, which is amazing enough, but it could work just as well for _anything_.

## Ship it ship it now ship ship

On Wednesday night we stayed late and shipped [makereal.tldraw.com](http://makereal.tldraw.com) (as well as a separate deployment domain, [drawmyui.com](http://drawmyui.com)). Up to now, the only people who could use the project were developers able to download and run the code on their own machine with their own API keys. But we wanted to get everyone involved.

It was of course a chaos release: the service’s rate limit kicked in immediately, causing the app to break for everyone. In desperation, we threw together a text input where users could input their own OpenAI developer API keys. This is usually a _terrible_ idea and security risk but there was no other way. And at least we could point back to the [source code](https://github.com/tldraw/draw-a-ui) to prove we weren’t harvesting keys.

And the response was incredible.

![](/images/blog/8507f536-6257-4ba8-9cec-78dc8610c414_1192x854.png)

Writing now, this release was roughly 72 hours ago. Since then, we’ve seen thousands of incredible posts, TikToks, and videos of people exploring this absolutely new possibility space. We couldn’t share it fast enough. We still can’t.

It’s been an absolute joy to see.

<YouTube src="https://www.youtube.com/embed/bnEf-4Kdwkg" caption="Wes Bos on YouTube" />

<Video
	lazy
	autoplay
	src="images/blog/1725175294598750651_1.mp4"
	caption="From https://twitter.com/muvich3n/status/1725175294598750651"
/>

<Video
	lazy
	autoplay
	src="/images/blog/1725071370449469520_1.mp4"
	caption="From https://twitter.com/hakimel/status/1725071370449469520"
/>

<Video
	lazy
	autoplay
	src="/images/blog/1724908185361011108_1.mp4"
	caption="From https://twitter.com/multikev/status/1724908185361011108"
/>

<Video
	lazy
	autoplay
	src="/images/blog/1725669747843330125_1.mp4"
	caption="From https://twitter.com/shuafeiwang/status/1725669747843330125"
/>

See many many many more examples on the [tldraw feed](https://twitter.com/tldraw).

## Make your own

On Friday, we [released a starter template](https://github.com/tldraw/make-real-starter) that you can use to create your own experiments with tldraw and GPT-4V.

![](/images/blog/e3f10501-6931-40e5-9402-1e1b5582c53f_2616x1576.png)

We’ve barely scratched the surface of what you can do with this technology. And we can’t possible explore it all. Our hope is that you can take this starter and run with it, too.

You’ve got a canvas that can hold the whole internet and an AI that can see and think.

What will you make?

---

Visit the [make real](https://makereal.tldraw.com) site for the GPT-4V prototype. Visit the regular [tldraw](https://www.tldraw.com) site for a free collaborative whiteboard. [Click here](https://together.tldraw.com) to draw something with randos.

To connect with the community, [join our Discord](https://discord.gg/Up7bFHPstc) or follow us on [Twitter](https://twitter.com/tldraw) or [Mastodon](https://mas.to/@tldraw). If you’re a developer, visit the [GitHub repo](https://github.com/tldraw/tldraw) or the [tldraw developer docs](https://www.tldraw.dev). Press inquiries to [press@tldraw.com](mailto:press@tldraw.com).
